<template>
  <div class='componentlist-container'>
    <el-form>
      <el-col :span="24"
              class="col-24">
        <el-col :span="2">
          <el-button>全部</el-button>
        </el-col>
        <el-col :span="22">
          <el-col :span="24">
            <el-steps align-center
                      :active="step"
                      simple>
              <el-step v-for="(item,index) in stepArr"
                       :key="index"
                       @click.native="stepChange(index)"
                       class="normal-step"
                       :title="item"></el-step>
            </el-steps>
          </el-col>

        </el-col>

      </el-col>

      <el-col :span="24"
              class="col-24-margin">
        <el-col :span="24">
          <el-col :span="5"
                  class="padd-style">
            构件编号
            <el-input class="memeber-input"
                      placeholder="输入构件编号"
                      v-model="memberParams.cp_num"></el-input>
          </el-col>
          <el-col :span="5"
                  class="padd-style">
            楼号
            <el-select v-model="memberParams.build_no"
                       class="memeber-select"
                       @change="getFloor"
                       placeholder="选择楼号">
              <el-option v-for="item in buildList"
                         :key="item.value"
                         :label="item.build_no"
                         :value="item.build_no">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="5"
                  class="padd-style">
            层号
            <el-select v-model="memberParams.floor_no"
                       class="memeber-select"
                       placeholder="选择层号">
              <el-option v-for="item in floorList"
                         :key="item.value"
                         :label="item.floor_no"
                         :value="item.floor_no">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="5"
                  class="padd-style">
            构件类型
            <el-select v-model="memberParams.cp_type"
                       class="memeber-select"
                       placeholder="选择构件类型">
              <el-option v-for="item in memberType"
                         :key="item.value"
                         :label="item.name"
                         :value="item.value">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="4"
                  align="right">
            <el-button type="primary"
                       class="head-right-search"
                       @click="search">查询</el-button>
            <el-button class="head-right-search"
                       @click="reset">重置</el-button>
          </el-col>
        </el-col>
      </el-col>

      <el-col :span="24"
              class="button-col">
        <el-button type="primary"
                   @click="download"
                   class="company-logo-upload">构件模板</el-button>
        <!-- <el-col :span='3'>
          <el-upload class="company-logo-upload"
                     action=""
                     :http-request="uploadCreditImg"
                     :on-preview="handlePreview"
                     :on-remove="handleRemove"
                     :before-remove="beforeRemove"
                     :on-success="handleCompanylogoSuccess"
                     :before-upload="beforeCompanylogoUpload"
                     multiple
                     :limit="1"
                     :data="creditImg"
                     accept=".xls"
                     :on-exceed="handleExceed"
                     :file-list="fileList">
            <el-button type="primary">导入模板</el-button>
          </el-upload>
        </el-col> -->
        <el-button type="primary"
                   class="print-btn">打印二维码</el-button>
        <!-- <el-dropdown>
          <el-button type="primary">
            更多<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="addMember">添加构件</el-dropdown-item>
            <el-dropdown-item>批量删除</el-dropdown-item>
            <el-dropdown-item>导出构件</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown> -->
      </el-col>

      <el-col :span="24"
              v-if="step===1?false:true"
              class="memberlist-select">
        <span class="checkbox-span"><span class="count-span el-icon-info"></span>已选择<span class="count-span">{{checkCount}}</span>项</span>
        <span class="checkbox-span">选择显示：</span>
        <el-checkbox :indeterminate="isIndeterminate"
                     class="checkbox-all"
                     v-model="checkAll"
                     @change="handleCheckAllChange">全选</el-checkbox>
        <el-checkbox-group v-model="checkedCities"
                           class="checkbox-item"
                           @change="handleCheckedCitiesChange">
          <el-checkbox v-for="city in cities"
                       :label="city"
                       :key="city">{{city}}</el-checkbox>
        </el-checkbox-group>
      </el-col>
      <el-table :highlight-current-row='true'
                :data='memberData.list'
                height="310"
                :header-cell-style="{background:'#f5f5f5'}"
                border>
        <el-table-column label='构件编号'
                         align='center'
                         width="300">
          <template slot-scope="scope">
            <el-badge :is-dot="true"
                      class="item item-dot">{{scope.row.cp_num}}</el-badge>
          </template>
        </el-table-column>
        <el-table-column prop='component_name'
                         label='构件类型'
                         align='center'
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop='build_no'
                         label='楼号'
                         align='center'
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop='floor_no'
                         label='层号'
                         align='center'
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column label='状态'
                         align='center'
                         show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{scope.row.status==='1'?'正常':'删除'}}</span>
          </template>
        </el-table-column>
        <el-table-column prop='made_complib_name'
                         label='加工厂'
                         align='center'
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop='created_at'
                         label='导入时间'
                         align='center'
                         v-if="checkedCities.indexOf('导入时间')!=-1?true:false"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop='make_date'
                         label='生产时间'
                         align='center'
                         v-if="checkedCities.indexOf('生产时间')!=-1?true:false"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop='in_user_date'
                         label='入库时间'
                         align='center'
                         v-if="checkedCities.indexOf('入库时间')!=-1?true:false"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column label='入库位置'
                         align='center'
                         prop="factory_point.name"
                         v-if="checkedCities.indexOf('入库位置')!=-1?true:false"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column label='ID芯片'
                         align='center'
                         prop="rfid_num"
                         v-if="checkedCities.indexOf('ID芯片')!=-1?true:false"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column label='出库时间'
                         align='center'
                         prop="out_date"
                         v-if="checkedCities.indexOf('出库时间')!=-1?true:false"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column label='运输车辆'
                         align='center'
                         prop="car.car_num"
                         v-if="checkedCities.indexOf('运输车辆')!=-1?true:false"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column label='进场时间'
                         align='center'
                         prop="scene_date"
                         v-if="checkedCities.indexOf('进场时间')!=-1?true:false"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column label='安装开始时间'
                         align='center'
                         prop="start_install_date"
                         v-if="checkedCities.indexOf('安装开始时间')!=-1?true:false"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column label='安装完成时间'
                         align='center'
                         prop="end_install_date"
                         v-if="checkedCities.indexOf('安装完成时间')!=-1?true:false"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column label='操作'
                         align='center'
                         width="220">
          <template slot-scope="scope">
            <el-button type="text"
                       @click="printData(scope.row)">打印</el-button>
            <el-button type="text"
                       @click="onLook(scope.row)">
              查看
            </el-button>
            <el-button type="text"
                       @click="onReport(scope.row)">
              报告
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @current-change='handlePageChange'
                     :current-page='requestParam.page'
                     :page-size='requestParam.page_size'
                     :page-sizes="[10]"
                     layout='total,sizes,prev, pager, next, jumper'
                     background
                     :total='memberData.total_count'
                     align='center'
                     style="margin-top:20px;">
      </el-pagination>
    </el-form>
    <!-- 打印的二维码 -->
    <div class="print-div"
         v-show="codeShow"
         ref="print">
      <div id="my-node-code">
        <div id="qrcode-print"
             ref="qrcode_print"></div>
        <p>项目:<span>{{qrcodeParams.project_name}}</span></p>
        <p>构件类型:<span>{{qrcodeParams.component_name}}</span></p>
        <p>楼号:<span>{{qrcodeParams.build_no}}</span></p>
        <p>层号:<span>{{qrcodeParams.floor_no}}</span></p>
        <p>构件加工厂:<span>{{qrcodeParams.made_complib_name}}</span></p>
        <p>构件编号:<span>{{qrcodeParams.cp_num}}</span></p>
      </div>
    </div>
    <el-col :span="24">
      <el-row :gutter="20">
        <GeneralAuthItemPopUpDialog v-if="geneAuthItemPopUpDialog==true"
                                    :objRowGeneral.sync="objRowGeneral"
                                    :currentPageName.sync="currentPageName"
                                    :geneAuthItemPopUpDialog.sync="geneAuthItemPopUpDialog"></GeneralAuthItemPopUpDialog>
</el-row>
    </el-col>
  </div>
</template>
<script>
import GeneralAuthItemPopUpDialog from '@/components/GeneralAuthItemPopUpDialog/GeneralAuthItemPopUpDialog';

// let cityOptions = [];
import { componListApi } from '@/services/ProjectCenter'
import { ProjectListApi } from "@/services/ProjectCenter";
import { standardCodeApi } from '@/services/StandardCode'
import QRCode from 'qrcodejs2'  // 引入qrcode
import domtoimage from 'dom-to-image';
export default {
  components: {
    GeneralAuthItemPopUpDialog
  },
  data () {
    return {
      isLookDataAuth: false,//是否有权限，true：是，false：否
      currentPageName: '项目列表',//当前页面的名称
      objRowGeneral: {},
      geneAuthItemPopUpDialog: false,
      step: 1,
      stepArr: ['设计深化', '加工制作', '工厂堆放', '道路运输', '现场堆放', '现场安装', '安装完成'],
      checkAll: false,
      profes_type: "",//测试数据可删除
      options: [],//测试数据可删除
      checkedCities: [],
      cityOptions: [],
      cities: [],
      checkCount: 0,
      isIndeterminate: false,
      requestParam: {
        page: 1,
        page_size: 10
      },
      memberData: {
        list: [],
        total_page: 0,
        total_count: 0
      },
      memberType: [],
      memberParams: {
        project_id: "1",
        cp_num: "",
        build_no: "",
        floor_no: "",
        cp_type: "",
      },
      buildList: [],//楼号
      floorList: [],//层号
      creditImg: {},
      fileList: [],
      addDialog: false,
      ruleForm: {
        type: '',
        number: '',
        building: '',
        tierNum: '',
        sourceMill: '',
        img1: '',
        img2: '',
        img3: '',
      },
      rules: {
        type: [
          { required: true, message: '请选择构件类型', trigger: 'change' }
        ],
        number: [
          { required: true, message: '请输入构件编码', trigger: 'blur' }
        ],
        building: [
          { required: true, message: '请输入楼号', trigger: 'blur' }
        ],
        tierNum: [
          { required: true, message: '请输入层号', trigger: 'blur' }
        ],
        sourceMill: [
          { required: true, message: '请选择加工厂', trigger: 'change' }
        ],
      },
      qrcodeParams: {
        project_name: "",
        component_name: "",
        build_no: "",
        floor_no: "",
        cp_num: "",
        made_complib_name: ""
      },
      codeShow: false,
    }
  },
  methods: {
    //全部已读事件
    allRead () {

    },
    //步骤切换
    stepChange (index) {
      this.step = index + 1
      if (index === 1 || index === 2 || index === 3) {
        this.cities = ['导入时间', '生产时间', '入库时间', '入库位置', 'ID芯片', '出库时间', '运输车辆']
      } else if (index === 4 || index === 5 || index === 6) {
        this.cities = ['ID芯片', '进场时间', '安装开始时间', '安装完成时间']
      }
    },
    // 上传图片
    uploadFile (params) {
      // var formData = new FormData();
      // formData.append("imgFile", params.file);
      // axios.post('upload/index?act=upload_image&type=component&dir=image', formData, {
      //   headers: {
      //     'Content-Type': 'multipart/form-data'
      //   }
      // })
    },
    //上次成功钩子
    success (res) {
      // if (this.ruleForm.img1 == '') {
      //   this.ruleForm.img1 = res.desc;
      // } else if (this.ruleForm.img2 == '') {
      //   this.ruleForm.img2 = res.desc;
      // } else {
      //   this.ruleForm.img3 = res.desc;
      // }
    },
    //上传图片限制
    exceed (res) {
      this.$message.error('超出限制');
    },

    //打印
    printData (row) {
      this.codeShow = true
      this.qrcodeParams.project_name = row.project.project_name
      this.qrcodeParams.component_name = row.component_name
      this.qrcodeParams.build_no = row.build_no
      this.qrcodeParams.floor_no = row.floor_no
      this.qrcodeParams.cp_num = row.cp_num
      this.qrcodeParams.made_complib_name = row.made_complib_name
      var that = this
      var timer = null
      var count = 0.1
      let qrcode = new QRCode(this.$refs.qrcode_print, {
        width: 180,
        height: 180,
        text: process.env.JUMP_TO_BIND_PAGE + 'memberQrCode?id=' + row.cp_id, // 二维码地址 
        colorDark: "#000",
        colorLight: "#fff",
      })
      timer = setInterval(function () {
        count--
        that.$print(that.$refs.print)
        if (count <= 0) {
          clearInterval(timer)
          document.getElementById('qrcode-print').innerHTML = ''
          that.codeShow = false
        }
      }, 100)
    },
    //跳转构件详情页面
    onLook (row) {
      this.$router.push({
        path: '/componentDetails', query: { id: row.cp_id, type: '1' }
      })
    },
    //跳转报告页面
    onReport (row) {
      this.$router.push({ path: '/reportList', query: { id: row.cp_id, type: '1' } });
    },
    //复选框选中事件
    handleCheckedCitiesChange (value) {
      this.checkedCities = value
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.checkAll === true ? this.checkCount = this.cities.length : this.checkCount = value.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
    },
    // 复选框全选事件
    handleCheckAllChange (val) {
      this.checkedCities = val ? this.cities : []
      this.checkAll === true ? this.checkCount = this.cities.length : this.checkCount = 0
      this.isIndeterminate = false
    },
    //分页
    handlePageChange (page) {
      this.requestParam.page = page
      this.getMemberData()
    },
    //查询
    search () {
      this.requestParam.page = 1
      this.handlePageChange(this.requestParam.page)
    },
    //重置
    reset () {
      this.memberParams.cp_num = ''
      this.memberParams.cp_type = ''
      this.memberParams.build_no = ''
      this.memberParams.floor_no = ''
      this.search()
    },
    //获取构件列表
    getMemberData () {
      return componListApi.getMemberList({
        params: {
          cp_num: this.memberParams.cp_num,
          project_id: this.memberParams.project_id,
          per_page: this.requestParam.page_size,
          page: this.requestParam.page,
          build_no: this.memberParams.build_no,
          floor_no: this.memberParams.floor_no,
          cp_type: this.memberParams.cp_type,
        }
      }).then(res => {
        this.memberData.list = res.data.data
        this.memberData.total_count = res.data.total
        for (var i = 0; i < this.memberData.list.length; i++) {
          for (var j = 0; j < this.memberType.length; j++) {
            if (this.memberData.list[i].cp_type === this.memberType[j].value) {
              this.memberData.list[i].component_name = this.memberType[j].name
            }
          }
        }
      })
    },
    //获取构件类型
    getMemberType () {
      return standardCodeApi.getStandardCodeData({
        data: {
          code_type: 'component_type'
        }
      }).then(res => {
        this.memberType = res.data.list
      })
    },
    //下载构件模板
    download () {
      componListApi.getMemberDownload({
      }).then(res => {
        if (res.code == '0') {
          var alink = document.createElement('a')
          alink.href = res.data.componentTemplateUrl
          alink.download = ""
          alink.click()
        }
      })
    },
    //获取楼号数据
    getBuild () {
      return componListApi.getBuildNum({
        params: {
          project_id: this.memberParams.project_id
        }
      }).then(res => {
        this.buildList = res.data
      })
    },
    //获取楼层数据
    getFloor () {
      this.memberParams.floor_no = ''
      componListApi.getFloorNum({
        data: {
          project_id: this.memberParams.project_id,
          build_no: this.memberParams.build_no
        }
      }).then(res => {
        this.floorList = res.data
      })
    },
    async initFunc () {
      await this.getBuild()
      await this.getMemberType()
      this.memberParams.project_id = this.$store.state.projectIdList.join(',')
      if (this.$store.state.projectIdList) {
        Promise.all([
          await this.getMemberData()
        ]).then(res => {

        })
      }
      await this.getMemberData()
    },
    noAuthFunc () {//无权限
      this.$alert('该页面数据未被授权,暂时无法查看项目数据,请申请授权.', '提示', {
        dangerouslyUseHTMLString: true
      });
    },
    checkCurrentProIsAuth (proId, objId) {
      ProjectListApi.checkCurrentProIsAuth({
        params: {
          project_id: proId,//项目id
          object_id: objId,//权限项id
        }
      }).then((res) => {
        if (res.data) {
          this.isLookDataAuth = res.data.check_power;
          if (this.isLookDataAuth == true) {//有权限
            this.initFunc();//数据渲染
          } else {//无权限
            this.noAuthFunc();
          }
        }
        console.log('88888res=', res)
      }).catch((error) => {
        console.log(error)
      })
    },
  },
  watch: {
    // objRowGeneral: {
    //   handler (n, o) {
    //     if (n.project_id) {
    //       this.checkCurrentProIsAuth(n.project_id, n.object_id)//检查当前项目是否有权限
    //     }
    //     console.log('w   objRowGeneral=', n)
    //   }, deep: true
    // },
    getProjectId (newval, oldval) {
      console.log('newval', newval)
      this.getMemberData()
    },
  },
  computed: {
    getProjectId () {
      let stateArray = this.$store.state.projectIdList
      let localArray = JSON.parse(window.localStorage.getItem('projectIdList'))
      let projectInfo = !stateArray ? localArray : stateArray
      console.log('tree', projectInfo)
      this.memberParams.project_id = projectInfo.join(',')
      return this.memberParams.project_id
    },
  },
  created () {
    this.initFunc();//数据渲染
    // this.objRowGeneral = {};//重置
    // this.geneAuthItemPopUpDialog = true;

  },
  mounted () {

  }
}
</script>
<style scoped lang='scss'>
.company-logo-upload {
  float: left;
  margin-left: 10px;
}
.print-btn {
  float: left;
  margin-right: 10px;
}
.head-right-step {
  cursor: pointer;
  margin-right: 20px;
}
.mid-table-span {
  color: blue;
  text-decoration: underline;
  cursor: pointer;
}
.head-right-search {
  // width: 100% !important;
  text-align: center;
  padding-right: 20px;
}
/deep/ .el-step__title.is-wait {
  color: black !important;
}
/deep/ .el-steps--simple {
  border-radius: 4px;
  background: #f5f7fa;
  padding: 0px !important;
}
/deep/ .el-step.is-simple:not(:last-of-type) .el-step__title {
  max-width: 100%;
  word-break: break-all;
}
/deep/ .el-step.is-simple {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 40px;
}
.col-24 {
  padding-bottom: 40px;
}
/deep/ .normal-step {
  margin-left: 25px;
  cursor: pointer;
}
/deep/ .col-24 .el-button {
  color: #3a8ee6 !important;
}
.col-24-margin {
  padding-bottom: 20px;
}
.padd-style {
  padding-right: 12px;
  .memeber-input {
    width: 60%;
  }
  .memeber-select {
    width: 70%;
  }
}
.componentlist-container {
  padding: 20px;
  .button-col {
    margin-bottom: 15px;
  }
  .memberlist-select {
    padding: 15px 0px;
    margin-bottom: 15px;
    background: rgba(230, 247, 255, 1);
    border-color: rgba(186, 231, 255, 1);
    overflow: hidden;
    // border-bottom: 1px solid #ebeef5;
    /deep/ .el-checkbox {
      margin-right: 10px;
    }
    .checkbox-span {
      float: left;
      margin-left: 15px;
      .count-span {
        color: #1890ff;
        padding: 0 3px;
      }
    }
    .checkbox-all {
      float: left;
    }
    .checkbox-item {
      float: left;
    }
  }
}
/deep/ .item-dot .el-badge__content.is-fixed {
  top: 2px;
}
.print-div {
  margin-top: 50px;
}
</style>
